<template>
  <div class="activity" ref="wrapper" id="box">
     <ul class="content">
        <li v-for="(item, index) of activityItem" :key="index">
          <p>{{item.title}}</p>
        </li>
      </ul>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'Activity',
  data () {
    return {
      scroll: null,
      activityItem: [],
      current: 0, // 当前页码
      pageSize: 7, // 每页数据10
      endOfTheScreen: false // 是否滚动到底部
    }
  },
  mounted () {
    this.$nextTick(() => {
      // this.scroll = new BScroll(this.$refs.wrapper, {
      //   scrollY: true,
      //   click: true,
      //   probeType: 3
      // })
    })
  },
  created () {
    this.getActivityItem(this.current, this.pageSize) // 首次加载
    let that = this // 滚动页面的时候function函数会改变，所以要在外面定义一个变量 才能监控到
    window.scroll = function () { // 滚动监听 window.onscroll
      that.endOfTheScreen = that.getScrollData() // 滚动的时候执行此函数
    }
  },
  methods: {
    getActivityItem (current, pageSize) {
      this.axios.get('/activityItem/' + current + '/' + pageSize)
        .then((res) => {
          console.log(res)
          let data = res.data
          this.activityItem = data
        })
    },
    getScrollData () {
      let winHeight = window.scrollY + window.innerHeight // 已滚动上去的长度+窗口可视区域的高度
      return winHeight === document.documentElement.offsetHeight // winHeight === 自身高度 当他俩相等的时候才会触发滚动事件
    }
  },
  watch: {
    endOfTheScreen (newVal) { // 监听，当为true的时候加载下一页数据
      if (newVal) {
        this.current++
        this.getActivityItem(this.current, this.pageSize)
      }
    }
  }
}
</script>

<style scoped lang="stylus">
  ///* position fixed
  //   top 0
  //bottom 100px*/
  .activity
    overflow hidden
    width 100%
    box-sizing border-box
    background #fff
    padding 18px 0 20px
    li
      border 1px solid red
      margin-bottom 20px
      p
        font-size 33px
</style>
